<template>
  <div class="app-container">
    <el-form
      ref="form"
      :model="form"
      size="medium"
      :inline="true"
      label-width="70px"
    >
      <el-form-item label="油企名称" v-show="isAdmin">
        <el-select
          style="width: 280px"
          v-model="enterpriseListValue"
          placeholder="请选择油企名称"
          @change="changeEnterpriseList"
        >
          <el-option
            v-for="item in enterpriseLists"
            :label="item.enterpriseName"
            :value="`${item.enterpriseId}-${item.enterpriseName}`"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="油站名称" prop="stationListValue">
        <el-select
          style="width: 280px"
          v-model="stationListValue"
          placeholder="请选择油站名称"
          @change="changeStationLists"
        >
          <el-option
            v-for="item in stationLists"
            :label="item.stationName"
            :value="`${item.stationId}-${item.stationName}`"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="油品" prop="oilName">
        <el-select
          style="width: 280px"
          v-model="form.oilName"
          placeholder="请选择油品"
        >
          <el-option
            v-for="item in oilNameLists"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="油枪" prop="oilGun">
        <el-select
          style="width: 280px"
          v-model="form.oilGun"
          placeholder="请选择油枪"
        >
          <el-option
            v-for="item in oilGunLists"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="创建时间" prop="datePicker">
        <el-date-picker
          style="width: 280px"
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="datePicker"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          @change="changeDatetimerange"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="订单号" v-show="collapse" prop="orderNum">
        <el-input
          maxlength="11"
          placeholder="请输入订单号"
          v-model.number="form.orderNum"
          style="width: 280px"
        ></el-input>
      </el-form-item>

      <el-row
        class="global_el_rowStyle"
        :gutter="10"
        style="
          border-top: none;
          border-bottom: 1px solid #f5f5f5;
          margin-top: -20px;
        "
      >
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="topSearch"
            >搜索</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-refresh"
            plain
            @click="topRefresh('form')"
            >重置</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button plain size="mini" @click="collapse = !collapse">
            {{ collapse ? "收起" : "展开更多" }}
            <i
              :class="collapse ? 'el-icon-arrow-up ' : 'el-icon-arrow-down'"
            ></i>
          </el-button>
        </el-col>
      </el-row>
      <div style="width: 80%; margin: 20px 0px">
        <el-row :gutter="20">
          <el-col :span="5">
            <div class="order-fz order-text-border">
              总价合计：<span class="order-text-color"
                >{{ data.totalPriceSum }} 元
              </span>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="order-fz order-text-border">
              加油量合计：<span class="order-text-color"
                >{{ data.orderLiterSum }} （L/kg）
              </span>
            </div>
          </el-col>

          <el-col :span="5">
            <div class="order-fz order-text-border" style="border: 0px">
              订单数：<span class="order-text-color"
                >{{ data.orderCount }} 笔
              </span>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <el-table :data="tableData" stripe style="width: 99%">
      <el-table-column type="selection" width="55" />
      <el-table-column
        v-for="item in columns"
        :prop="item.prop"
        :label="item.label"
      >
      </el-table-column>
      <!-- <el-table-column prop="enterpriseName" label="油企名称">
      </el-table-column> -->
      <el-table-column prop="stationName" label="油站名称"> </el-table-column>
      <el-table-column prop="cardNum" label="卡号"> </el-table-column>
      <el-table-column prop="oilName" label="油品"> </el-table-column>
      <el-table-column prop="oilGun" label="油枪"> </el-table-column>
      <el-table-column prop="balanceAmount" label="卡余额"> </el-table-column>
      <el-table-column prop="startFlowMeter" label="开始泵码（L/kg）">
      </el-table-column>
      <el-table-column prop="endFlowMeter" label="结束泵码（L/kg）">
      </el-table-column>
      <el-table-column prop="orderLiters" label="加油量"> </el-table-column>
      <el-table-column prop="oilPrice" label="单价"> </el-table-column>
      <el-table-column prop="totalPrice" label="总价"> </el-table-column>
      <el-table-column prop="orderTime" label="创建时间"> </el-table-column>
    </el-table>
    <el-pagination
      class="order-pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="form.pageSize"
      layout="->,total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { oilEngineList, oilEngineSum, oilGun, oilName } from "@/api/order";
import { listEnterpriseStation } from "@/api/dept";
import getUserProfileName from "@/utils/getUserProfile";
import { enterpriseList } from "@/api/station/order";

export default {
  name: "Oil_Engine",
  data() {
    return {
      data: {},
      isAdmin: null,
      pageNum: 1,
      pageSize: 10,
      total: null,
      currentPage1: 5,
      collapse: true,
      // 油企列表
      enterpriseLists: [],
      // 油企选择值
      enterpriseListValue: "",
      // 油站列表
      stationLists: [],
      // 油站选择值
      stationListValue: "",
      // 油品列表
      oilNameLists: [],
      // 油枪列表
      oilGunLists: [],
      // 时间数组
      datePicker: "",
      form: {
        // 开始时间
        beginTime: this.getTim().beginTime,
        // 结束时间
        endTime: this.getTim().endTime,
        // 结束时间,
        // 油企id
        enterpriseId: null,
        // 油企名称
        enterpriseName: null,
        // 油枪
        oilGun: null,
        // 油品
        oilName: null,
        // 油品编号
        oilNameNum: null,
        // 订单号
        orderNum: null,
        // 油站id
        stationId: null,
        // 油站名
        stationName: null,
      },
      tableData: [],
      columns: [],
    };
  },
  created() {
    this.getStationList();
    Promise.all([
      this.enterpriseList(),
      this.stationList(),
      this.oilNameList(),
      this.oilGunList(),
      this.engineList(),
      this.engineSum(),
    ]);
  },
  methods: {
    // 获取日期
    getTim() {
      let nowTime = {
        beginTime: "",
        endTime: "",
      };
      const date = new Date();
      //年
      const year = date.getFullYear();
      //月
      const month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      //日
      const day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      //时
      const hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      //分
      const mm =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      //秒
      const ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

      nowTime.beginTime =
        year + "-" + month + "-" + day + " " + "00" + ":" + "00" + ":" + "00";

      nowTime.endTime =
        year + "-" + month + "-" + day + " " + hh + ":" + mm + ":" + ss;
      return nowTime;
    },

    // 判断是不是admin账号
    async getStationList() {
      // 判断是不是admin账号
      const isDelete = await getUserProfileName();
      if (isDelete) {
        this.isAdmin = true;
        this.columns = [{ prop: "enterpriseName", label: "油企名称" }];
        console.log("判断是不是admin账号", "是");
      } else {
        this.isAdmin = false;
        this.columns = [];
        console.log("判断是不是admin账号", "不是");
      }
    },

    // 获取油企
    enterpriseList() {
      enterpriseList().then((res) => {
        this.enterpriseLists = res.rows;
        console.log("获取油企", res);
      });
    },

    // 点击油企名称
    changeEnterpriseList() {
      // 油企id
      this.form.enterpriseId = this.enterpriseListValue.split("-")[0];
      // 油企名称
      this.form.enterpriseName = this.enterpriseListValue.split("-")[1];
      // console.log("点击油企名称", this.enterpriseListValue.split("-"));
    },

    // 获取油站
    stationList() {
      listEnterpriseStation({
        enterpriseId:
          this.presentEnterprise && this.presentEnterprise.enterpriseId,
        status: "1",
      }).then((res) => {
        this.stationLists = res;
        console.log("获取油站", res);
      });
    },

    // 点击油站列表
    changeStationLists() {
      // 油站id
      this.form.stationId = this.stationListValue.split("-")[0];
      // 油站名
      this.form.stationName = this.stationListValue.split("-")[1];
      // console.log("点击油站列表", this.stationListValue.split("-"));
    },

    // 获取油品
    oilNameList() {
      oilName({
        enterpriseId:
          this.presentEnterprise && this.presentEnterprise.enterpriseId,
      }).then((res) => {
        this.oilNameLists = res.data;
        console.log("获取油品", res);
      });
    },

    // 获取油枪
    oilGunList() {
      oilGun({
        enterpriseId:
          this.presentEnterprise && this.presentEnterprise.enterpriseId,
      }).then((res) => {
        this.oilGunLists = res.data;
        console.log("获取油枪", res);
      });
    },

    // 选择了时间
    changeDatetimerange() {
      // 开始时间
      this.form.beginTime = this.datePicker[0];
      // 结束时间
      this.form.endTime = this.datePicker[1];
      // console.log("选择了时间", this.datePicker);
    },

    // 点击搜索
    topSearch() {
      this.engineList();
      this.engineSum();
    },

    //点击重置
    topRefresh() {
      // 开始时间 // 结束时间
      this.form.beginTime = this.getTim().beginTime;
      this.form.endTime = this.getTim().endTime;
      this.datePicker = null;
      // 油站名
      this.form.stationId = null;
      this.form.stationName = null;
      this.stationListValue = null;
      // 油企名称
      this.form.enterpriseId = null;
      this.form.enterpriseName = null;
      this.enterpriseListValue = null;
      this.$refs.form.resetFields();
      this.topSearch();
    },

    // 获取筛选列表
    engineList() {
      oilEngineList(this.form, this.pageNum, this.pageSize).then((res) => {
        this.total = res.total;
        this.tableData = res.rows;
      });
    },

    // 获取总计算数量
    engineSum() {
      oilEngineSum(this.form, this.pageNum, this.pageSize).then((res) => {
        this.data = res.data;
      });
    },

    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.engineList();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.engineList();
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style lang="scss" scoped>
.order-pagination {
  margin: 20px 10px 10px 10px;
}
.order-fz {
  width: 200px;
  font-size: 14px;
  margin-right: 50px;
}
.order-text-border {
  border-right: 1px solid #989898b4;
}
.order-text-color {
  color: #1990ff;
}
</style>
